<template>
  <div style="width: 100%;" id="home">
    <div style="width: 400px;margin: 100px auto">
      <div style="color: #cccccc;font-size: 30px;text-align: center;padding: 30px 0">欢迎注册</div>
      <el-form ref="form" :model="form" :rules="rules" status-icon size="large">
        <el-form-item prop="loginAct">
          <el-input v-model="form.loginAct">
            <template #prefix>
              <el-icon class="el-input__icon"><Avatar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="loginPwd">
          <el-input v-model="form.loginPwd" show-password>
            <template #prefix>
              <el-icon class="el-input__icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="confirm">
          <el-input v-model="form.confirm" show-password>
            <template #prefix>
              <el-icon class="el-input__icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="register">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {Avatar,Lock} from "@element-plus/icons";
import request from "@/utils/request";
export default {
  name: "Login",
  components: {
    Avatar,Lock
  },
  data() {
    return {
      form: {},
      rules: {
        loginAct: [
          { required: true, message: '请输入注册账号', trigger: 'blur' }
        ],
        loginPwd: [
          { required: true, message: '请输入注册密码', trigger: 'blur' }
        ],
        confirm: [
          { required: true, message: '请再次输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    register(){
      if(this.form.loginPwd != this.form.confirm){
        this.$message({
          type: "error",
          message: "两次输入的密码不一致!"
        })
        return;
      }
      this.$refs['form'].validate((valid) => {
        if(valid){
          request.post("order/admin/save", this.form).then(res =>{
            this.msgTip("注册",res);
          });
        }
      })
    },
    msgTip(msg,res){
      if(res.code == 200){
        this.$message({
          type:"success",
          message: msg+"成功"
        })
        this.$router.push("/");
      }else{
        this.$message({
          type:"error",
          message:res.data
        })
      }
    }
  }
}

</script>

<style scoped>
  #home {
    background: url("../assets/a.jpeg");
    width: 100%;
    height: 100vh;
    position: fixed;
    background-size: 100%,100%;
  }
</style>